/**
 * 移动端专用样式
 * 提供针对移动设备的额外优化
 * @format
 */

/* 移动端媒体查询 */
@media (max-width: 767px) {
  /* 通用容器样式 */
  .container,
  .w {
    width: 100% !important;
    // padding: 0 !important;
  }

  /* 字体大小调整 */
  .fontsize-16 {
    font-size: 14px !important;
  }

  .fontsize-20 {
    font-size: 16px !important;
  }

  /* 对话框适配 */
  .el-dialog {
    width: 90% !important;
    margin: 10px auto !important;
  }

  /* 图片响应式 */
  img {
    max-width: 100%;
    height: auto;
  }

  /* 表单元素适配 */
  .el-input,
  .el-select {
    width: 100% !important;
  }

  /* 弹性布局调整 */
  .flex {
    &.space-between {
      flex-direction: column !important;

      // @media (max-width: 480px) {
      //   align-items: flex-start !important;
      // }
    }
    &.flex-row {
      flex-direction: row !important;
    }
  }
  .flex-row {
    flex-direction: row !important;
  }

  /* 边距调整 */
  .mgb-26 {
    margin-bottom: 15px !important;
  }

  /* 商品卡片适配 */
  .home-shop-card {
    width: 100% !important;
    max-width: 100% !important;
    // padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;

    .number {
      font-size: 12px !important;
    }

    .name {
      font-size: 16px !important;
      margin-top: 8px !important;
      margin-bottom: 8px !important;
      height: auto !important;
      -webkit-line-clamp: 2 !important;
    }

    .tags {
      flex-wrap: wrap !important;
      margin-bottom: 10px !important;

      .tag {
        margin-bottom: 5px !important;
        font-size: 12px !important;
        padding: 4px 8px !important;
      }
    }

    .home-shop-card-image {
      height: auto !important;
      max-height: 200px !important;
      object-fit: contain !important;
    }

    .original_price,
    .present_price {
      font-size: 24px !important;
      margin-top: 8px !important;
    }

    .installment {
      font-size: 12px !important;
      margin-top: 5px !important;
      // margin-bottom: 10px !important;
    }
  }

  /* 订单页面适配 */
  .my-order-container {
    padding: 15px !important;

    .my-order-header {
      flex-direction: column !important;
      align-items: flex-start !important;

      h1 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
      }
    }

    .order-list-header {
      display: none !important;
    }

    .order-list {
      .order-item {
        margin-bottom: 15px !important;

        .order-info {
          flex-direction: column !important;
          padding: 10px !important;

          .flex {
            flex-direction: column !important;
            align-items: flex-start !important;

            .order-date,
            .order-number {
              margin-bottom: 5px !important;
              font-size: 12px !important;
            }
          }
        }

        .order-content {
          flex-direction: column !important;
          padding: 10px !important;

          .product-info {
            width: 100% !important;
            margin-bottom: 10px !important;

            .product-image {
              width: 80px !important;
              height: 80px !important;
            }

            .product-details {
              .product-name {
                width: auto !important;
                font-size: 14px !important;
              }

              .product-spec {
                font-size: 12px !important;
              }
            }
          }

          .product-price,
          .product-quantity,
          .product-status,
          .product-amount {
            width: 100% !important;
            text-align: left !important;
            padding: 5px 0 !important;
            font-size: 14px !important;
            display: flex !important;
            justify-content: space-between !important;

            &::before {
              content: attr(data-label);
              font-weight: bold;
            }
          }

          .product-operations {
            width: 100% !important;
            justify-content: flex-start !important;
            flex-wrap: wrap !important;
            margin-top: 10px !important;

            button {
              margin: 5px 10px 5px 0 !important;
              font-size: 12px !important;
              padding: 5px 10px !important;
            }
          }
        }
      }
    }
  }
}
